<template>
  <div>
    <!-- <el-header class="row">
      <div class="col">团队名称：{{ teamInfo.name }}</div>
      <div class="col">团队管理员:{{ teamInfo.user?.name }}</div>
    </el-header> -->
    <el-tabs type="border-card" @tab-change="tabChange" v-model="activeName">
      <el-tab-pane :lazy="true" name="成员配置" label="成员配置">
        <router-view @update:tabName="tabChange" name="TeamUser"></router-view>
      </el-tab-pane>
      <el-tab-pane :lazy="true" name="团队用户组" label="团队用户组">
        <router-view name="Teamusergroup"></router-view>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-button class="position-relative">
          <router-link class="stretched-link" :to="{ name: '成员配置' }">成员配置</router-link>
        </el-button>
        <el-button class="position-relative">
          <router-link class="stretched-link" :to="{ name: '团队用户组' }">团队用户组</router-link>
        </el-button> -->
    <!-- <el-button class="position-relative">
          <router-link class="stretched-link" :to="{ name: '团队课程包' }">团队课程包</router-link>
        </el-button>
        <el-button class="position-relative">
          <router-link class="stretched-link" :to="{ name: '团队短信' }">发送短信</router-link>
        </el-button>
        <el-button class="position-relative">
          <router-link class="stretched-link" :to="{ name: '团队文件' }">资料</router-link>
        </el-button>
        <el-button class="position-relative">
          <router-link class="stretched-link" :to="{ name: '团队地址' }">团队地址</router-link>
        </el-button> -->
    <!-- <router-view></router-view> -->
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";

const router = useRouter()
const route = useRoute()
const store = useStore(Storekey)
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const teamId = computed(() => {
  return user.value?.teamid
})
const activeName = ref("成员配置")

onMounted(async () => {
  start()
})
async function start() {
  tabChange(route.name)
}

// 跳转
function tabChange(name: string) {
  activeName.value = name
  router.push({ name: name, });
}

</script>

<style scoped>
.router-link-active {
  color: cadetblue;
}
</style>